<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app">
    <h1 ref="domH">hello world</h1>
    <my-h ref="myH"></my-h>
    <button @click="getElement">获取元素</button>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    let myH = {
        template: '<h3>this is my h</h3>',
        data() {
            return {
                msg: 'component msg'
            }
        },
        methods: {
            hi() {
               console.log('component hi')
            }
        }
    };
    var vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            getElement() {
                // 因为vue不推荐直接操作dom元素，所以提供了ref来获取dom和组件引用
                console.log(this.$refs.domH.innerText);

                // 获取组件引用后，可以获取data数据和调用组件方法
                console.log(this.$refs.myH.msg);
                this.$refs.myH.hi()
            }
        },
        components: {
            myH
        },
    });
</script>
</body>
</html>
